package com.fishingwithme.android.ui.screens.circle

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavController
import com.fishingwithme.android.R
import com.fishingwithme.android.ui.components.MultiImageDisplay
import com.fishingwithme.android.ui.theme.AppDimensions
import com.fishingwithme.android.ui.viewmodels.CircleDetailModel

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CircleDetailScreen(
    navController: NavController,
    id: String,
    viewModel: CircleDetailModel = hiltViewModel()
) {
    LaunchedEffect(id) {
        if (id.isNotEmpty()) {
            viewModel.getCircleDetail(id)
        }
    }

    val uiState by viewModel.uiState.collectAsState()
    val scrollState = rememberScrollState()

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        when {
            uiState.isLoading -> {
                CircularProgressIndicator()
            }

            uiState.error != null -> {
                Text(
                    text = uiState.error!!,
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.padding(AppDimensions.SPACING_16)
                )
            }

            uiState.detail != null -> {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .verticalScroll(scrollState)
                        .padding(AppDimensions.SPACING_16)
                ) {
                    val circle = uiState.detail

                    // 1. Display pictures at the top using MultiImageDisplay
                    circle?.pics?.let { pictures ->
                        MultiImageDisplay(
                            pictures = pictures,
                            modifier = Modifier.fillMaxWidth()
                        )
                    } ?: run {
                        // Show empty state if no pictures
                        MultiImageDisplay(
                            pictures = emptyList(),
                            modifier = Modifier.fillMaxWidth()
                        )
                    }

                    Spacer(modifier = Modifier.height(AppDimensions.SPACING_16))

                    // 2. Title
                    Text(
                        text = circle?.title ?: "未设置",
                        style = MaterialTheme.typography.headlineMedium,
                        modifier = Modifier.fillMaxWidth()
                    )

                    Spacer(modifier = Modifier.height(AppDimensions.SPACING_16))

                    // 3. City and isActive
                    Text(
                        text = "${circle?.city} ${
                            if (circle?.isActive == 1) stringResource(R.string.active) else stringResource(
                                R.string.inactive
                            )
                        }",
                        style = MaterialTheme.typography.bodyLarge,
                        modifier = Modifier.fillMaxWidth()
                    )

                    Spacer(modifier = Modifier.height(AppDimensions.SPACING_8))

                    // 4. spotCnt
                    Text(
                        text = "${stringResource(R.string.spot_count)}: ${circle?.spotCnt ?: 0}",
                        style = MaterialTheme.typography.bodyMedium,
                        modifier = Modifier.fillMaxWidth()
                    )

                    Spacer(modifier = Modifier.height(AppDimensions.SPACING_8))

                    // 5. maintainerCnt
                    Text(
                        text = "${stringResource(R.string.maintainer_count)}: ${circle?.maintainerCnt ?: 0}",
                        style = MaterialTheme.typography.bodyMedium,
                        modifier = Modifier.fillMaxWidth()
                    )

                    Spacer(modifier = Modifier.height(AppDimensions.SPACING_8))

                    // 6. area
                    Text(
                        text = "${stringResource(R.string.area)}: ${circle?.area ?: 0.0} km²",
                        style = MaterialTheme.typography.bodyMedium,
                        modifier = Modifier.fillMaxWidth()
                    )

                    Spacer(modifier = Modifier.height(AppDimensions.SPACING_16))

                    // 描述卡片 - 独立显示
                    if (circle?.description?.isNotEmpty() ?: false) {
                        Card(
                            modifier = Modifier.fillMaxWidth(),
                            elevation = CardDefaults.cardElevation(defaultElevation = AppDimensions.CARD_ELEVATION_2)
                        ) {
                            Column(
                                modifier = Modifier.padding(AppDimensions.SPACING_16)
                            ) {
                                Text(
                                    text = stringResource(R.string.spot_description),
                                    style = MaterialTheme.typography.titleMedium,
                                    fontWeight = FontWeight.Bold
                                )
                                Spacer(modifier = Modifier.height(AppDimensions.SPACING_8))
                                circle?.description?.let {
                                    Text(
                                        text = it,
                                        style = MaterialTheme.typography.bodyMedium
                                    )
                                }
                            }
                        }
                    }
                }
            }

            else -> {
                Text(
                    text = stringResource(R.string.no_data_available),
                    style = MaterialTheme.typography.bodyLarge
                )
            }
        }
    }
}